 <link rel="stylesheet" href="__ROOT__/public/headfly/css/style.css" type="text/css" media="screen"/>
        <style>
            .titless{
                width:500px;
                height:152px;
                position:absolute;
                top:0px;
                left:0px;
                background:transparent url(title.png) no-repeat top left;
            }
            a.back{
                background:transparent url(back.png) no-repeat top left;
                position:fixed;
                width:150px;
                height:27px;
                outline:none;
                bottom:0px;
                left:0px;
            }
            #content{
                margin:0 auto;
            }
            .reference{
                clear:both;
                top:300px;
                left:0px;
                position:absolute;
                text-align:right;
                width:400px;
                padding:20px;
                background-color:#fff;
                -moz-box-shadow:1px 3px 15px #ddd;
                -webkit-box-shadow:1px 3px 15px #ddd;
                box-shadow:1px 3px 15px #ddd;
            }
            .reference p a{
                text-transform:uppercase;
                text-shadow:1px 1px 1px #fff;
                color:#666;
                text-decoration:none;
                font-size:10px;
            }
            .reference p a:hover{
                color:#333;
            }
			ul.accordion{
				overflow:hidden!important;
			}

        </style>
        <div id="content">
            <div class="titless"></div>
            <div class="reference">
                <p><a href="javascript:;">Image 1: Michelle Meiklejohn / FreeDigitalPhotos.net</a></p>
                <p><a href="javascript:;">Image 2: Luigi Diamanti / FreeDigitalPhotos.net</a></p>
                <p><a href="javascript:;">Image 3: Tina Phillips / FreeDigitalPhotos.net</a></p>
                <p><a href="javascript:;">Image 4: Ahmet Guler / FreeDigitalPhotos.net</a></p>
            </div>


            <ul class="accordion" id="accordion">
            <volist name='fly' id='fly'>
                <li class="bg1" style="background:url('__ROOT__/{$fly.fpic}');">
                    <div class="heading">{$fly.fname}</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <a href="{:U('Product/index','id='.$fly['fid'])}"><h2>{$fly.fname}</h2></a>
                        <p>{$fly.fcontent}.</p>
                        <a href="#">Look &rarr;</a>
                    </div>
                </li>
            </volist>
            </ul>
        </div>

        <!-- The JavaScript -->
        <script type="text/javascript">
            $(function() {
                $('#accordion > li').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'480px'},500);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'115px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });
        </script>